<template>
    <el-card class="my-20px">
        <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
    </el-card>
    <el-card>
        <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData" v-model:page-info="pageInfo"
            @pageChange="handlePageChange" @sort-change="sortMethod">
            <!-- <template #settings>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="toDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </template> -->
        </tableComponent>
    </el-card>
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import { getdepartmentapi } from '@/api/api.ts'
import { getRefundDetailed } from '@/api/dashboard/sasspay.ts'
import { getDealList, getDeptList, getSalesmanList, getProductList } from '@/api/clients/signClient.ts'

const filterData = ref({
    list: {
        deptId: {
            name: '所属分组',
            prop: 'deptId',
            value: '',
            placeholder: '请选择所属分组',
            type: 'selectDept',
            options: [],
            defaultAttrs: {
                label: 'deptName',
                value: 'deptId'
            },
            handleFocus: (item) => {
                // if (item.options?.length) return
                // getDeptList({
                //     type: 1
                // }).then(res => {
                //     item.options = res
                // })
            }, 
            handleChange: (item) => {
                filterData.value.list.salesId.value = ''
                filterData.value.list.salesId.options = []
            }
        },
        salesId: {
            name: '成员',
            clearOption: true,
            prop: 'saleId',
            value: '',
            placeholder: '请选择成员',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'saleName',
                value: 'saleId'
            },
            handleFocus: (item) => {
                const value = filterData.value.list.deptId.value
                if (!value) {
                    ElMessage.warning({
                        message: '请先选择所属部门'
                    })
                    return
                }
                if (item.options?.length) return
                getSalesmanList({
                    auditStatus: 1,
                    deptId: value
                }).then(res => {
                    item.options = res
                })
            }
        },
        date: {
            name: '日期',
            prop: 'date',
            value: [],
            placeholder: '请选择日期',
            type: 'date',
            dateType: 'daterange',
            handleFocus: (item) => {

            },
            handleChange: (item) => {
                console.log(1111, item.value)
            }
        },
        searchText: {
            name: '搜索',
            prop: 'searchText',
            value: '',
            placeholder: '请输入客户名称/负责人',
            type: 'input',
            inputType: 'text',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            },
            handleInput: (item) => {

            }
        },
    },
    buttonList: [
        // {
        //     icon: 'Plus',
        //     name: '新增行业',
        //     click: () => {
        //         addType.value = 'add'
        //         showAdd.value = true
        //         curItem.value = {}
        //     }
        // }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户名称',
        prop: 'companyName',
    },
    {
        label: '商务负责人',
        prop: 'businessPrincipal',
    },
    {
        label: '所属分组',
        prop: 'deptName',
    },
    {
        label: '退款金额',
        prop: 'refundAmount',
        width: 100,
        prefix: '¥',
        style: {
            color: '#FF7642'
        }
    },
    {
        label: '退款方式',
        prop: 'refundMethod',
        width: 100
    },
    {
        label: '退款时间',
        prop: 'refundDate',
        width: 150,
        sortable: 'customer'
    }
])

const sortOrder = ref('')

const tableData = ref([])

const sortMethod = ({ prop, order }) => {
    // 0:付款时间 倒序 1:付款时间 正序 ,2:开通时间 倒序 3:开通时间 正序,4:到期时间倒序,5到期时间,正序
    switch(prop) {
        case 'paymentTime':
            if (!order) {
                sortOrder.value = ''
            } else {
                sortOrder.value = order === 'ascending' ? 1 : 0
            }
            break
        case 'productOpenTime':
            if (!order) {
                sortOrder.value = ''
            } else {
                sortOrder.value = order === 'ascending' ? 3 : 2
            }
            break
        case 'dueDate':
            if (!order) {
                sortOrder.value = ''
            } else {
                sortOrder.value = order === 'ascending' ? 5 : 4
            }
            break
    }
    getData()
}

const handleSearch = () => {
    getData()
}

const handlePageChange = () => {
    getData()
}

const toDetail = () => {
    console.log(2222)
}

const createQuery = () => {
    const query = {}
    for(const key in filterData.value.list) {
        if(filterData.value.list[key].prop === 'date') {
            query.startTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[0] : ''
            query.endTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[1] : ''
        } else {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value
        }
    }
    return query
}

const getData = () => {
    getRefundDetailed({
        ...createQuery(),
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
        sortOrder: sortOrder.value
    }).then(res => {
        tableData.value = res.list
        pageInfo.value.total = res.totalCount
    })
}

onMounted(() => {
    getData()
})
onActivated(() => {
    getData()
})
</script>
<style lang="scss" scoped>

</style>